<template>
  <div>
    <el-dialog title="添加图片" :visible.sync="subDialogVisible" width="46%">
        <el-card>
          <el-upload
            class="upload-demo"
            :action="uploadPath"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="uploadSuccess"
            accept=".xls,.xlsx"
           >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-card>
        <el-card>
          <el-table :data="pictureList" border stripe>
              <el-table-column label="logo">
                <template v-if="scope.row.logo" slot-scope="scope">
                    <img style="width: 150px;height: 120px;vertical-align: middle;border:1px solid #FFB6C1;border-radius:6px"
                        :src="imgBaseUrl + scope.row.logo +'?iopcmd=thumbnail&type=4&width=150'"
                    />
                </template>
            </el-table-column>
            <el-table-column label="排序">
              <template slot-scope="scope">
                <el-input style="width:100px;"
                  v-model="scope.row.sortNum"
                  placeholder="请输入内容"
                  @change="setSortNum(scope.row.id, scope.row.sortNum)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="删除">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            icon="el-icon-delete"
                            size="mini"
                            @click="delPicture(scope.row.id)"
                        ></el-button>
                    </template>
                </el-table-column>
            <el-table-column label="添加时间" prop="addTime"></el-table-column>
          </el-table>
        </el-card>
    </el-dialog>
  </div>
</template>

<script>
import MallApi from "@/api/Mall.js";
export default {
  props: {},
  data() {
    return {
      imgBaseUrl: this.$global.imgBaseUrl,
      uploadPath: process.env.VUE_APP_BASE_API + "api/upload/image",
      subDialogVisible : false,
      productId: '',
      pictureList: []
    };
  },
  watch: {},
  methods: {
    showPictureList(productId) {
      this.subDialogVisible = true;
      this.productId = productId;
      MallApi.getPictureList({'productId':this.productId}).then((res) => {
        if (res.success) {
          this.pictureList = res.data.pictureList;
        } else {
          return this.$message.error("获取图片列表失败");
        }
      });
    },
    setSortNum(id, sortNum) {
      MallApi.setPictureSortNum({
        id: id,
        sortNum: sortNum,
      }).then((res) => {
        if (res.success) {
          this.showPictureList(this.productId);
        }
      });
    },
    delPicture(id) {
      MallApi.deletePicture({
        id: id
      }).then((res) => {
        if (res.success) {
          this.showPictureList(this.productId);
        }
      });
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePreview(file) {
        console.log(file);
    },
    uploadSuccess(res){
        if(res.success) {
          MallApi.savePicture({
            productId: this.productId,
            logo: res.data,
          }).then((res) => {
            if (res.success) {
              this.showPictureList(this.productId);
            }
        });
      }
    }
  }
};
</script>

<style>
.form_ipt {
  width: 450px;
}
</style>
